<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>帖子发布</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
	<link href="../../css/city/reset.css" rel="stylesheet" />
	<script src="../../js/statistics.js"></script>
	<style>
		body{
			font-family: "microsoft yahei",sans-serif;
			padding-top: 44px;
			background: #f2f2f2;
		}
		.mui-bar{
			background: #43ac45;
		}
		.mui-title{
			color:#ffffff;
		}
		.mui-action-back{
			color: #ffffff;
		}
		.title{
			height: 45px!important;
			border:none!important;
			margin-bottom: 0!important;
			border-bottom: 1px solid #e5e5e5!important;
			font-size: 1.4rem;
			color:#666666;
		}
		.con{
			height: 160px;
			overflow: hidden;
		}
		.content{
			padding: 10px 12px;
			height: 160px;
			margin-bottom: 0!important;
			border-bottom: 1px solid #e5e5e5!important;
			font-size: 1.4rem;
			color:#666666;
		}
		.tab{
			width: 100%;
			height: 44px;
			background: #ffffff;
			border-bottom: 1px solid #e5e5e5;
			padding: 10px;
			font-size: 1.4rem;
			line-height: 24px;
			color:#999999;
		}
		.mui-icon-arrowdown,.mui-icon-arrowup{
			color:#999999;
		}
		.tab img{
			height: 14px;
			width: 14px;
			margin-top: 5px;
		}
		.tab2{
			width: 100%;
			height: 55px;
			background: #ffffff;
			padding-right: 20px;
			vertical-align: middle;
		}
		.tab2 img{
			height:25px;
			width: 25px;
			margin-top: 15px;
			margin-left: 10px;
		}
		.tab2 .btn{
			display: inline-block;
			width: 80px;
			height: 34px;
			background: #43ac45;
			margin-top: 10px;
			color:#ffffff;
			line-height: 34px;
			text-align: center;
			-webkit-border-radius:4px;
			border-radius:4px;
		}
		.imgs{
			padding: 0 10px;
		}
		.imgs .imgblock{
			display: inline-block;
			position: relative;
			top:0;
			width: 65px;
			height: 65px;
			/*margin: 0 5px;*/
			-webkit-border-radius:4px;
			border-radius:4px;
			overflow: hidden;
		}
		.imgs .imgblock .imgc,#add img{
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			-webkit-border-radius:4px;
			border-radius:4px;
		}
		.imgs .imgblock_{
			display: inline-block;
			position: relative;
			width: 65px;
			height: 65px;
			margin: 20px 5px 0 5px ;
			-webkit-border-radius:4px;
			border-radius:4px;
		}
		.imgs .imgblock_ .del{
			position: absolute;
			top:-8px;
			right: -8px;
			width: 22px;
			height: 22px;
		}
		.tagsb{
			overflow: hidden;
			height: 0;
		}
		.tags{
			padding: 8px;
		}
		.tag{
			display: inline-block;
			height: 30px;
			background: #ffffff;
			padding: 0 5px;
			margin: 5px;
			font-size: 1.4rem;
			line-height: 30px;
			-webkit-border-radius:4px;
			border-radius:4px;
		}
		.tag[data-tab = '0']{
			color:#999999;
			border:1px solid #cccccc;
		}
		.tag[data-tab = '1']{
			color:#43ac45;
			border:1px solid #43ac45;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav header">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="back1"></a>
		<h1 class="mui-title">发帖</h1>
	</header>
	<input type="text" placeholder="标题，4-25个字" class="title" maxlength="25">
	<div class="con">
		<textarea placeholder="内容，10-700个字" class="content" maxlength="700"></textarea>
	</div>
	<div class="tab">
		<img src="../../images/city/tab@2x.png" alt="标签">
		<span>请选择话题标签</span>
		<a class="mui-icon mui-icon-arrowdown mui-pull-right arrow"></a>
	</div>
	<div class="tagsb">
		<div class="tags">

		</div>
	</div>
	<div class="tab2 clear">
		<img src="../../images/city/pic_@2x.png" alt="图片" class="pic">
		<!--<img src="../../images/city/emo@2x.png" alt="表情" class="emo">-->
		<div class="btn fr" id="publish">发表</div>
	</div>
	<div class="imgs">
		<div class="imgblock_"  id="add">
			<a class="imgblock" href="#sheet1">
				<img src=" ../../images/city/addpic@2x.png" alt="添加图片">
			</a>
		</div>
	</div>
	<div class="emos hidden">
		表情包
	</div>
	<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
		<!-- 可选择菜单 -->
		<ul class="mui-table-view">
			<li class="mui-table-view-cell" id='submit1'>
				<a>从相册中选择</a>
			</li>
			<li class="mui-table-view-cell" id='submit2'>
				<a>拍照</a>
			</li>
		</ul>
		<!-- 取消菜单 -->
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="#sheet1"><b>取消</b></a>
			</li>
		</ul>
	</div>
	<script src="../../plugins/mui/mui.min.js"></script>
	<script src="../../js/getApiToken.js"></script>
	<script src="../../js/md5.js"></script>
	<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>

	<script>
	mui.init();
	//图片上传
	mui.plusReady(function(){
		//关闭等待框
		plus.nativeUI.closeWaiting();
		//显示当前页面
		mui.currentWebview.show('slide-in-right',200);
		//获取本地用户信息
		var user_id = plus.storage.getItem('cg_user_id');
		var user_token = plus.storage.getItem('cg_user_token');
		var username = plus.storage.getItem('cg_nickname');
		var userheadimg = plus.storage.getItem('cg_headimgurl');
		//获取标签
		myAjax(
				'card/card_type/gettypelist',
				'get', {
					//					'api_token': 'f73d661f4b89e335d6e126975e7f04fc'
				}, function(data) {
					//					console.log(JSON.stringify(data));
					if(data.success) {
						var html = '';
						var lists = data.data;
						var len = lists.length;
						for(var i = 0 ; i < len ;i++){
							var list = lists[i];
							html+='<span class="tag" data-tab="0" datasrc='+list.id+'>'+list.interest+'</span>';
						}
						$('.tags' ).append(html);}
					//标签的选择
					mui(".tag").each(function () {
						var this_ = this;
						this_.addEventListener('tap', function(e) {
							e.detail.gesture.preventDefault(); //修复iOS 8.x
							mui('input' ).each(function(){
								$(this ).blur();
							});
							if(this_.getAttribute("data-tab") == 1){
								this_.setAttribute("data-tab", "0");
							}else{
								this_.setAttribute("data-tab", "1");
								var a = $(this ).siblings();
								var len =a.length;
								for(var i = 0 ;i < len ;i++){
									a[i].setAttribute("data-tab", "0");
								}
							}
						});
					});
				});
		//发表
		document.getElementById('publish').addEventListener('tap',function(e){
			e.detail.gesture.preventDefault(); //修复iOS 8.x
			var title = document.getElementsByClassName('title')[0 ].value;
			var content = document.getElementsByClassName('content')[0 ].value;
			var tab;
			var title_len = title.length;
			var content_len = content.length;
			mui(".tag").each(function () {
				var this_ = this;
				if(this_.getAttribute("data-tab") == 1){
					tab = this_.getAttribute("datasrc")
				}
			});
			if( title_len >= 4 && title_len <= 25 ){
				if(content_len >= 10 && content_len <= 700){
					if(tab){
						var imgs ='';
						var img = $('.imgblock_');
						var len = img.length;
						if(len > 1){
							imgs =[];
							for(var i = 0 ; i< len -1 ;i++){
								var src = img.eq(i).find('.imgc').attr("src").substring(23);
								imgs.push(src);
							}
						}
						var data_ = {
//							'api_token': 'c2d49689e7825562be554b749fa8285d',
							'user_id':user_id,
							'user_token':user_token,
							'type':tab,
							'title':title,
							'content':content,
							'list_img':imgs
						};
						console.log(JSON.stringify(data_));
						console.log(imgs.length);
						plus.nativeUI.showWaiting('提交中...');
						//ajax
						myAjax(
								'card/card/setCard',
								'post',
								data_, function(data) {
									if(data.success) {
										
										plus.nativeUI.closeWaiting();
										mui.openWindow({
											url:'tribune_index.html',
											id:'tribune_index',
											extras:{
												type:'all'
											},
											show:{
												autoShow:false,
												duration:200
											},
											waiting:{
												autoShow:true,
												title:'正在加载...'
											}
										});
										plus.webview.currentWebview().close();
									} else {
										plus.nativeUI.closeWaiting();
										console.log(JSON.stringify(data));
										mui.alert('发表失败');
									}
								});

					}else{
						mui.toast('请选择话题标签');
					}
				}else{
					mui.toast('内容字数应在10-700字');
				}
			}else{
				mui.toast('标题字数应在4-25字');
			}
		});
		//标签显示与关闭.
		document.getElementsByClassName('tab')[0 ].addEventListener('tap',function(e){
			e.detail.gesture.preventDefault(); //修复iOS 8.x
			var h;
			var tagsb = document.getElementsByClassName('tagsb')[0 ];
			var arrow = document.getElementsByClassName('arrow')[0 ];
			mui('input' ).each(function(){
				$(this ).blur();
			});
			tagsb.style.transition='height 500ms';
			if($(arrow ).hasClass('mui-icon-arrowdown')){
				h = document.getElementsByClassName('tags')[0 ].offsetHeight;
			}else{
				h = 0;
			}
			tagsb.style.height= h+'px';
			$(arrow ).toggleClass('mui-icon-arrowdown');
			$(arrow ).toggleClass('mui-icon-arrowup');
		});
		//绑定上传图片事件
		document.getElementById('submit1').addEventListener("tap",function () {
			chooseImgFromAlbums();
		});
		document.getElementById('submit2').addEventListener("tap",function () {chooseImgFromPictures();});
		//选择图片后,返回按钮bug
		document.getElementById('back1').addEventListener("tap",function () {plus.webview.currentWebview().close();});
		//从相册选择
		function chooseImgFromAlbums(){
			mui('#sheet1').popover('toggle');
			plus.gallery.pick(function(file) {
						changeToLocalUrl(file);
				},
				function(err) {
					mui('#sheet1').popover('toggle');
				},
				{
					filter: 'image',
					multiple: false
				});
		}
		//拍照选择图片
		function chooseImgFromPictures() {
			mui('#sheet1').popover('toggle');
			var cmr = plus.camera.getCamera();
			cmr.captureImage(function(file) {
				changeToLocalUrl(file);
			}, function(err) {
				mui('#sheet1').popover('toggle');
			}, {
				index: '2'
			});
		}
		//进行处理跳转
		function changeToLocalUrl(path) {
			plus.io.resolveLocalFileSystemURL(path, function(entry) {
				entry.file( function ( file ) {
					if(file.size/1024/1024 < 5){
						console.log('原图'+(file.size/1024/1024).toFixed(2));
						var multiple=1-(file.size/1024/1024/5.5).toFixed(2);
						console.log('比例'+multiple);
//						multiple = 0.1;
						uploadHead(entry.toLocalURL(),multiple);
						plus.nativeUI.showWaiting('上传中...');
					}else{
						mui.toast('图片大于5M,请重新上传');
					}
				}, function ( e ) {
					alert( e.message );
				} );
			});
		}
		//把图片更新到页面
		function uploadHead(imgPath,b) {
			var image = new Image();
			image.src = imgPath;
			console.log(imgPath);
			image.onload = function() {
				var imgData = getBase64Image(image,b);
				var html = document.createElement("div");
				$(html ).addClass('imgblock_');
				html.innerHTML = '<div class="imgblock"><img src="'+ imgData +'" alt="图片" class="imgc img"></div><img src="../../images/city/del@2x.png" alt="删除" class="del">';
				var add = document.getElementById('add');
				document.getElementsByClassName('imgs' )[0].insertBefore(html,add);
				var len = document.getElementsByClassName('imgblock').length;
				if(len >= 5){
					add.style.display = 'none';
				}
				//图片截取
				setTimeout(function(){
					mui(".imgblock .imgc").each(function (){
						var this_ = this;
						var ih = this_.offsetHeight;
						var iw = this_.offsetWidth;
						if(ih == iw){
							this_.offsetHeight = '65px';
							this_.offsetWidth = '65px';
						}else if(ih > iw){
							this_.width = '65px';
							this.style.top = -this_.offsetHeight/2+65/2 + 'px';
						}else{
							this.style.height = '65px';
							this.style.left = -this_.offsetWidth/2+65/2 + 'px';
						}
					});
				},150);
				plus.nativeUI.closeWaiting();
			}
		}
		//将图片压缩转成base64
		function getBase64Image(img,b) {
			var canvas = document.createElement("canvas");
			var width = img.width;
			var height = img.height;
			//图片比例一定的取中间
//			var x,y,c,z;
//			if (width > height) {
//				x=(width-height)/2;
//				y=0;
//				c=height;
//				z=height;
//			} else if(width < height){
//				x=0;
//				y=(height-width)/2;
//				c=width;
//				z=width;
//			}else{
//				x=0;
//				y=0;
//				c=width;
//				z=height;
//			}
			var clipArea = document.getElementById("clipArea");
			canvas.width = width;   /*设置新的图片的宽度*/
			canvas.height = height; /*设置新的图片的长度*/
			var ctx = canvas.getContext("2d");
//			ctx.drawImage(img,x,y,c,z,0,0,width,height); /*绘图*/
			ctx.drawImage(img,0,0,width,height);
			var dataURL = canvas.toDataURL("image/jpeg");
			return dataURL;
		}
		//图片删除
		$('.imgs').delegate('.del','tap',function(e){
			var this_ = this;
			//e.detail.gesture.preventDefault(); //修复iOS 8.x
			var btnArray = ['否', '是'];
			mui.confirm('您是否确定删除图片？', '提示', btnArray, function(e) {
				if (e.index == 1) {
					var len = document.getElementsByClassName('imgblock').length;
					if(len == 5){
						add.style.display = 'inline-block';
					}
					var parent = this_.parentNode;
					parent.remove();
				}
			});
		});
		//图片和表情的选择
		//	document.getElementsByClassName('pic')[0 ].addEventListener('tap',function(e){
		//		e.detail.gesture.preventDefault(); //修复iOS 8.x
		//		var pic = document.getElementsByClassName('pic')[0 ];
		//		var emo = document.getElementsByClassName('emo')[0 ];
		//		var pics = document.getElementsByClassName('imgs')[0 ];
		//		var emos = document.getElementsByClassName('emos')[0 ];
		//		pic.setAttribute('src','../../images/city/pic_@2x.png');
		//		emo.setAttribute('src','../../images/city/emo@2x.png');
		//		addClass(emos, 'hidden');
		//		removeClass(pics, 'hidden')
		//	});
		//	document.getElementsByClassName('emo')[0 ].addEventListener('tap',function(e){
		//		e.detail.gesture.preventDefault(); //修复iOS 8.x
		//		var pic = document.getElementsByClassName('pic')[0 ];
		//		var emo = document.getElementsByClassName('emo')[0 ];
		//		var pics = document.getElementsByClassName('imgs')[0 ];
		//		var emos = document.getElementsByClassName('emos')[0 ];
		//		pic.setAttribute('src','../../images/city/pic@2x.png');
		//		emo.setAttribute('src','../../images/city/emo_@2x.png');
		//		addClass(pics, 'hidden');
		//		removeClass(emos, 'hidden')
		//	});
	});
	</script>
</body>
</html>